<template>
  <div class="home">
    <div class="top">
      <el-dropdown>
        <el-avatar icon="el-icon-user-solid"></el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="goRouter(1)">个人信息</el-dropdown-item>
          <el-dropdown-item @click.native="goRouter(2)">前往学习</el-dropdown-item>
          <el-dropdown-item @click.native="goRouter(3)">前往答题</el-dropdown-item>
          <el-dropdown-item @click.native="goRouter(4)">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="searchBox flex">
      <el-input class="searchInput" placeholder="请输入内容" v-model="searchVal">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button icon="el-icon-search" circle @click="search(searchVal)"></el-button>
    </div>
    <div v-if="searchTrue" v-loading="loading">
      <div v-if="searchData.length > 0">
        <p class="tips">为您搜索到“<span>{{searchVal}}</span>”相关内容：</p>
        <div v-for="(s,sin) in searchData" :key="sin">
          <div class="searchItem">{{s}}</div>
        </div>
        <p class="back" @click="back()">返回</p>
      </div>
      <div v-if="searchNull">
        <p class="tips">搜索不到“<span>{{searchVal}}</span>”相关内容</p>
        <p class="back" @click="back()">返回</p>
      </div>
    </div>
    <div v-if="!searchTrue">
      <div class="centerBox">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card shadow="hover" @click.native="goCentent(1)">
              可回收垃圾
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" @click.native="goCentent(2)">
              厨余垃圾
            </el-card>
          </el-col>
          <el-col :span="6" @click.native="goCentent(3)">
            <el-card shadow="hover">
              有害垃圾
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" @click.native="goCentent(4)">
              干垃圾
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="(item,index) in newLists" :key="index">
          <p @click="goNews(item.text)">{{ item.text }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      searchData: [], //搜索结果
      searchNull: false, // 搜索结果不为空
      searchLists: ["可回收垃圾", "有害垃圾", "厨余垃圾", "干垃圾"], // 假数据库
      loading: false,
      searchTrue: false, // 搜索显示
      searchVal: "", // 搜索框输入内容
      newLists: [
        {
          text:
            "垃圾分类 需要从自身做起:如今，住建部发布的最新标准出台，也给垃圾分类提供了一份标准答案。标准立起来，为各地的地方立法提供参考，也为各地的执行提供了依据。对于个人而言，虽然垃圾分类是小事，但把垃圾分好，在标准制定和立法上把垃圾分类做到规范，从而产生的巨大环保和资源收益。如此看来，垃圾分类又是利国利民的大事。"
        },
        {
          text:
            "天下大事，必作于细。利国利民，从我做起，全社会共同参与，在实践中化解分类难题，是垃圾分类的必由之路。"
        },
        {
          text:
            "垃圾分类新标准来了:垃圾分类新标准来了，就在11月16的时候，垃圾分类新标准登上了热搜，11月15日，住房和城乡建设部召开新闻通气会，会上发布了《生活垃圾分类标志》新版标准，与2008版标准对比可以发现，最新版的生活垃圾分类标志，在适用范围、类别构成、图形符号上都进行了不少调整。生活垃圾的类别也被调整为可回收物、有害垃圾、厨余垃圾和其他垃圾4个大类共计11个小类。较2008年版的这个标准修订适用范围，本次标准的修订明确规定了生活垃圾分类标志类别的构成，大类图形的符号、大类标志的设计、小类图形符号、小类标志的设计，以及生活垃圾分类标志的设置。新版标准删除了“大件垃圾”“可燃垃圾”“可堆肥垃圾”和“瓶罐”等4个标志类别，增加了“厨余垃圾”“灯管”“家用化学品”标志类别。这垃圾分类，又来新题目了。本标准适用于生活垃圾的分类投放、分类升级、分类运输和分类的处理工作。标准适用范围的调整，更加注重生活垃圾分类标志，在应用当中的规范性和广泛性。针对部分试点地区的差异，例如厨余垃圾、餐厨垃圾或者“湿垃圾”，新标准都统一为厨余垃圾。"
        },
        {
          text:
            "天下大事，必作于细。利国利民，从我做起，全社会共同参与，在实践中化解分类难题，是垃圾分类的必由之路。"
        },
        {
          text:
            "垃圾分类新标准来了:垃圾分类新标准来了，就在11月16的时候，垃圾分类新标准登上了热搜，11月15日，住房和城乡建设部召开新闻通气会，会上发布了《生活垃圾分类标志》新版标准，与2008版标准对比可以发现，最新版的生活垃圾分类标志，在适用范围、类别构成、图形符号上都进行了不少调整。生活垃圾的类别也被调整为可回收物、有害垃圾、厨余垃圾和其他垃圾4个大类共计11个小类。较2008年版的这个标准修订适用范围，本次标准的修订明确规定了生活垃圾分类标志类别的构成，大类图形的符号、大类标志的设计、小类图形符号、小类标志的设计，以及生活垃圾分类标志的设置。新版标准删除了“大件垃圾”“可燃垃圾”“可堆肥垃圾”和“瓶罐”等4个标志类别，增加了“厨余垃圾”“灯管”“家用化学品”标志类别。这垃圾分类，又来新题目了。本标准适用于生活垃圾的分类投放、分类升级、分类运输和分类的处理工作。标准适用范围的调整，更加注重生活垃圾分类标志，在应用当中的规范性和广泛性。针对部分试点地区的差异，例如厨余垃圾、餐厨垃圾或者“湿垃圾”，新标准都统一为厨余垃圾。垃圾分类新标准来了:垃圾分类新标准来了，就在11月16的时候，垃圾分类新标准登上了热搜，11月15日，住房和城乡建设部召开新闻通气会，会上发布了《生活垃圾分类标志》新版标准，与2008版标准对比可以发现，最新版的生活垃圾分类标志，在适用范围、类别构成、图形符号上都进行了不少调整。"
        },
        {
          text:
            "垃圾分类新标准来了:垃圾分类新标准来了，就在11月16的时候，垃圾分类新标准登上了热搜，11月15日，住房和城乡建设部召开新闻通气会，会上发布了《生活垃圾分类标志》新版标准，与2008版标准对比可以发现，最新版的生活垃圾分类标志，在适用范围、类别构成、图形符号上都进行了不少调整。生活垃圾的类别也被调整为可回收物、有害垃圾、厨余垃圾和其他垃圾4个大类共计11个小类。较2008年版的这个标准修订适用范围，本次标准的修订明确规定了生活垃圾分类标志类别的构成，大类图形的符号、大类标志的设计、小类图形符号、小类标志的设计，以及生活垃圾分类标志的设置。新版标准删除了“大件垃圾”“可燃垃圾”“可堆肥垃圾”和“瓶罐”等4个标志类别，增加了“厨余垃圾”“灯管”“家用化学品”标志类别。这垃圾分类，又来新题目了。本标准适用于生活垃圾的分类投放、分类升级、分类运输和分类的处理工作。标准适用范围的调整，更加注重生活垃圾分类标志，在应用当中的规范性和广泛性。针对部分试点地区的差异，例如厨余垃圾、餐厨垃圾或者“湿垃圾”，新标准都统一为厨余垃圾。"
        },
        {
          text:
            "生活垃圾的类别也被调整为可回收物、有害垃圾、厨余垃圾和其他垃圾4个大类共计11个小类。较2008年版的这个标准修订适用范围，本次标准的修订明确规定了生活垃圾分类标志类别的构成，大类图形的符号、大类标志的设计、小类图形符号、小类标志的设计，以及生活垃圾分类标志的设置。新版标准删除了“大件垃圾”“可燃垃圾”“可堆肥垃圾”和“瓶罐”等4个标志类别，增加了“厨余垃圾”“灯管”“家用化学品”标志类别。这垃圾分类，又来新题目了。本标准适用于生活垃圾的分类投放、分类升级、分类运输和分类的处理工作。标准适用范围的调整，更加注重生活垃圾分类标志，在应用当中的规范性和广泛性。针对部分试点地区的差异，例如厨余垃圾、餐厨垃圾或者“湿垃圾”，新标准都统一为厨余垃圾。"
        }
      ]
    };
  },
  methods: {
    /**
     * @author: 蒙爱菊(1512415785@qq.com)
     * @description: 跳转至其他页面
     * @param {type}
     * @return:
     * @Date: 2019-12-18 14:20:49
     */
    goRouter(index) {
      var msg = "";
      switch (index) {
        case 1:
          msg = "个人信息";
          break;
        case 2:
          msg = "学习";
          break;
        case 3:
          msg = "答题";
          break;
        case 4:
          msg = "登录";
          break;
      }
      this.$message({
        message: msg + "功能暂未开放，敬请期待！"
      });
    },
    /**
     * @author: 蒙爱菊(1512415785@qq.com)
     * @description: 查看热点资讯
     * @param {type}
     * @return:
     * @Date: 2019-12-18 14:02:03
     */
    goNews(data) {
      this.$message({
        message: "热点资讯功能暂未开放，敬请期待！"
      });
    },
    /**
     * @author: 蒙爱菊(1512415785@qq.com)
     * @description: 取消搜索，返回
     * @param {type}
     * @return:
     * @Date: 2019-12-18 14:00:51
     */
    back() {
      this.searchTrue = false;
      this.searchNull = false;
    },
    /**
     * @author: 蒙爱菊(1512415785@qq.com)
     * @description: 搜索
     * @param {type}
     * @return:
     * @Date: 2019-12-18 14:01:17
     */
    search(value) {
      this.searchData = [];
      this.searchNull = false;
      if (value) {
        this.loading = true;
        this.searchTrue = true;
        this.$router.push({ path: "/", query: { searchVal: value } });
        setTimeout(() => {
          this.loading = false;
          this.searchLists.forEach(item => {
            if (value == item) {
              this.searchData.push(item);
            }
          });
          if (!this.searchData.length > 0) {
            this.searchNull = true;
          }
        }, 2000);
        return this.searchData;
      }
    },
    /**
     * @author: 蒙爱菊(1512415785@qq.com)
     * @description: 查看词条内容
     * @param {type}
     * @return:
     * @Date: 2019-12-18 14:01:28
     */
    goCentent(i) {
      this.$router.push({
        path: "/centent", //跳转路由
        query: {
          //参数对象
          i
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  margin: 0 100px;
  .top {
    position: fixed;
    top: 20px;
    right: 40px;
  }
  .searchBox {
    margin: 50px 200px;
    .searchInput {
      margin: 0 10px;
    }
  }
  .searchItem {
    background: #e0e1e4;
    border-radius: 6px;
    padding: 15px;
  }
  .centerBox {
    height: 100px;
    margin: 0 200px 50px;
    .el-card {
      cursor: pointer;
    }
  }
  .el-carousel__item {
    border-radius: 6px;
  }
  .el-carousel__item p {
    height: 250px;
    color: #475669;
    font-size: 16px;
    // padding: 30px;
    opacity: 0.75;
    margin: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>
<style lang="scss">
.flex {
  display: flex;
}
.back {
  cursor: pointer;
  color: #6dacff;
  font-size: 14px;
  letter-spacing: 5px;
  text-decoration: underline;
}
.tips {
  font-size: 14px;
  span {
    color: #b82121;
  }
}
</style>